<script lang='ts' setup>
import Theme from '@/components/Theme.vue'
import { onMounted, onBeforeMount, ref } from 'vue'
import { appContext } from './models/app.context';
import { userService } from './services/user.service';
import { assetService } from './services/asset.service';
import { appRef } from './models/app.ref';
import { synchronousService } from './services/synchronous.service';
import { appNotify, NotifyType } from './models/app.notify';

const isDownLoading = ref(false)
onBeforeMount(async () => {
  isDownLoading.value = true;
  await synchronousService.down();
  console.log('synchronousService.down 结束');
  isDownLoading.value = false;
})

onMounted(() => {
  appContext.system.init();
  if (appContext.system.data.viewWidth > 1000) appRef.isOpen = true;
  userService.token();
  assetService.token();
  // 浏览器窗口变动
  window.onresize = onresize;
})

function onresize(): void {
  appContext.system.data.viewWidth < 1000 ? (appRef.isOpen = false) : (appRef.isOpen = true);
}
</script>

<template>
  <template v-if="!isDownLoading">
    <router-view></router-view>
    <Theme />
  </template>
</template>
<style lang="scss">
// 占位行
.root {
  // background: #f3f3f3;
  align-content: flex-start;

  .main {
    flex: 1;
    width: 100%;
    overflow: hidden;
    // @media screen and (max-width: 1200px) {
    //   width: 100%;
    // }
    // @media screen and (min-width: 1200px) {
    //   min-width: 1200px;
    //   width: 1400px;
    // }
  }
}

.not-scene {
  justify-content: center;
  font-size: 20px;
}
</style>
